<template>
  <div id="line" style="width: 100%; height: 300px"></div>
</template>
<script>
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  data() {
    return {
      data: [],
      chartType: 'line'
    }
  },
  mounted() {},
  methods: {
    init({data, type}) {
      this.data = JSON.parse(JSON.stringify(data))
      this.chartType = type === 0 ? 'line' : 'bar'
      this.$nextTick(() => {
        this.renderInfoMove()
      })
    },
    renderInfoMove() {
      let chart = this.$echarts.init(document.getElementById("line"));
      let xAxisData = [],
        yAxisData = [];
      for (let i = 0; i < this.data.length; i++) {
        xAxisData.push(this.data[i].key);
        yAxisData.push(this.data[i].doc_count);
      }
      let option = {
        title: {
          x: "20px",
          y: "5%",
          textStyle: {
            fontSize: 14,
            color: "#505058",
            fontWeight: "bold",
          },
        },
        tooltip: {
          confine: true,
          show: true,
          // trigger: 'item',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          borderColor: '#fff',
          padding: 5,
          textStyle: {
            fontWeight: "normal",
            color: "#000",
          },
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          show: false,
          icon: "roundRect",
          left: 160,
          top: 20,
        },
        grid: {
          top: '20',
          left: "60",
          right: "60",
          bottom: "20",
          containLabel: true,
        },
        xAxis: [
          {
            data: xAxisData,
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e7e8ec",
              },
            },
            boundaryGap: false,
            axisLabel: {
              color: "#888797",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            splitArea: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e7e8ec",
              },
            },
            axisLabel: {
              color: "#888797",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            splitArea: {
              show: false,
            },
            axisTick: {
              show: true,
            },
          },
        ],
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#e7e8ec",
            },
          },
          axisLabel: {
            show: true,
            color: "#888797",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      }

      let series = {
        name: "",
        type: this.chartType,
        // color: "#504da5",
        // symbol: "none",
        smooth: false,
        barMaxWidth: '20',
        data: yAxisData,
      }

      if (xAxisData.length > 1) {
        series['symbol'] = 'none'
      }

      option['series'] = series
      chart.setOption(option);
    },
  },
};
</script>